import React, { useState, useEffect, useRef, useMemo } from 'react';
import './frame.css'
import ReactECharts from 'echarts-for-react';

interface ChildProps {
    title: string;//标题
    data: any,//分类数据
    truecon: string,//分类条件
    falsecon: string,//分类条件
    colors: any,//颜色，数组
    field: any,//分类字段
}

const Charts: React.FC<ChildProps> = ({ field, title, data, truecon, falsecon, colors }) => {
    const datas: any = useMemo(() => {
        let ls = data.filter((item: any) => {
            return item[field]
        })
        return [
            { value: ls.length, name: truecon },
            { value: data.length - ls.length, name: falsecon },
        ]
    }, [data])
    useEffect(() => {

    }, [])
    //////////echarts图表
    const option = {
        color: colors,
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['55%', '80%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {

                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: datas
            }
        ]
    };
    //////////echarts图表
    return (
        <>
            <div style={{ fontSize: '20px', position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: '0.5px solid #f3f3f3', width: '25%', height: '30%', padding: '20px' }}>
                <p>{title}</p>
                <p><span style={{ fontWeight: '700', fontSize: '28px' }}>{data.length}</span></p>
                <p style={{ color: '#aaaaaa' }}><span>{truecon}&nbsp;{datas[0].value}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{falsecon}&nbsp;{datas[1].value}</span></p>
                <div style={{ position: 'absolute', top: '10px', right: '20px' }}><ReactECharts option={option} style={{ height: '110px', width: '110px' }} /></div>
            </div>
        </>
    );
}

export default Charts;